JavaScript30秒， 从入门到放弃之Array（七）

GitHub地址：JavaScript30秒， 从入门到放弃之Array（七）

博客地址：JavaScript30秒， 从入门到放弃之Array（七）

水平有限，欢迎批评指正

without

Filters out the elements of an array, that have one of the specified values.

Use Array.filter() to create an array excluding(using !Array.includes()) all given values.

const without = (arr, ...args) => arr.filter(v => !args.includes(v));

剔除掉数组中所有存在于所指定的元素们的项。

使用Array.filter()创建一个将所有提供的值排除在外(使用!Array.includes())的数组。

➜  code cat without.js
const without = (arr, ...args) => arr.filter(v => !args.includes(v));

console.log(without([2, 1, 2, 3], 1, 2));
➜  code node without.js
[ 3 ]

filter和includes结合，把数组arr中所有存在于指定的元素值…args中的项排除在外，很清爽干净。

xProd

Creates a new array out of the two supplied by creating each possible pair from the arrays.

Use Array.reduce(), Array.map() and Array.concat() to produce every possible pair from the elements of the two arrays and save them in an array.

const xProd = (a, b) => a.reduce((acc, x) => acc.concat(b.map(y => [x, y])), []);

创建一个新数组，数组元素由两个数组的元素交叉组合而成。

使用Array.reduce()，Array.map()和Array.concat()来创建由两个数组元素拼接而成的所有可能对并将它们存在一个数组中的数组。

➜  code cat xProd.js
const xProd = (a, b) => a.reduce((acc, val) => acc.concat(b.map(v => [val, v])), []);

console.log(xProd([1, 2], ['a', 'b']));

➜  code node xProd.js
[ [ 1, 'a' ], [ 1, 'b' ], [ 2, 'a' ], [ 2, 'b' ] ]

reduce初始值acc是一个空数组[]，随着遍历的进行acc会concat生成的元素组合对的数组。组合对就是由b.map(v => [val, v]生成的。也就是reduce遍历一次时，数组a的一个元素分别和数组b的所有元素分别组成一对。

zip

Creates an array of elements, grouped based on the position in the original arrays.

Use Math.max.apply() to get the longest array in the arguments. Creates an array with that length as return value and use Array.from()with a map-function to create an array of grouped elements. If lengths of the argument-arrays vary, undefined is used where no value could be found.

const zip = (...arrays) => {
  const maxLength = Math.max(...arrays.map(x => x.length));
  return Array.from({ length: maxLength }).map((_, i) => {
    return Array.from({ length: arrays.length }, (_, k) => arrays[k][i]);
  });
};

创建一个数组，数组元素由指定的多个数组根据位置对应分组而成的数组构成。例如，多个数组的第一个元素组成一个新数组，第二个元素组成一个新数组，依次类推。最终把所有分类号的数组存到一个数组中。

先使用Math.max.apply()来计算出最终成组的长度，然后使用该长度结合Array.from()和map去遍历创建该数组的所有分组子数组。如果其中任意一个数组在对应位置上元素不存在（如长度为2的数组试图获取第3个元素）则undefined将被使用。

➜  code cat zip.js
const zip = (...arrays) => {
  const maxLength = Math.max(...arrays.map(x => x.length));

  return Array.from({
    length: maxLength
  }).map((_, i) => Array.from({
      length: arrays.length
    }, (_, k) => arrays[k][i]));
};

console.log(zip(['a', 'b'], [1, 2], [true, false]));
console.log(zip(['a'], [1, 2], [true, false]));

➜  code node zip.js
[ [ 'a', 1, true ], [ 'b', 2, false ] ]
[ [ 'a', 1, true ], [ undefined, 2, false ] ]

const maxLength = Math.max(...arrays.map(x => x.length));

这是最终分成maxLength组，比如一个数组含有100个元素，另一个数组含有1个元素，最终要分成100组，所以需要用Math.max()去获取所有数组中长度最长的那个。

return Array.from({
    length: maxLength
  }).map((_, i) => Array.from({
    length: arrays.length
  }).map((_, k) => arrays[k][i])
);

使用Array.from结合length生成长度为maxLength的数组这没啥说的了，重点是map后的方法，map的每一个数组里包含多少个元素才可以呢？稍微想一下就知道，应该是arrays的个数，因为每一个数组都要拿一个出来组装。所以这里又用了一个Array.from配上length: arrays.length来定一个数组里包含的元素数量。那么这些元素由什么组成呢？这里还是要配合一个(_, k) => arrays[k][i])方法去取arrays的元素。获取的是对应每一个数组的第i个元素。

zipObject

Given an array of valid property identifiers and an array of values, return an object associating the properties to the values.

Since an object can have undefined values but not undefined property pointers, the array of properties is used to decide the structure of the resulting object using Array.reduce().

const zipObject = (props, values) =>
  props.reduce((obj, prop, index) => ((obj[prop] = values[index]), obj), {});

提供一个有效的属性标识符的数组和一个含值数组，返回一个把属性和值拼合的对象。即有效的属性标识符数组的第一项为键，含值数组的第一项为值，依次类推。

由于一个对象值可以为undefined而键不能为undefined，所以只有有效的属性标识符数组能用来决定了对象的组成结构。因而使用Array.reduce()对该数组进行相关操作。

➜  code cat zipObject.js
const zipObject = (props, values) => props.reduce((acc, val, i) => ((acc[val] = values[i]), acc), {});

console.log(zipObject(['a', 'b', 'c'], [1, 2]));
console.log(zipObject(['a', 'b'], [1, 2, 3]));

➜  code node zipObject.js
{ a: 1, b: 2, c: undefined }
{ a: 1, b: 2 }

(obj[prop] = values[index]), obj)

JavaScript的逗号运算符是指按照顺序执行表达式，最终返回最后一个表达式的运行结果。对于这个例子来说，就是先创造一个键值对，最后返回该对象。换一般的写法就是如下：

obj[prop] = values[index];
return obj;

这点弄通了就好理解了。

实际上就是以props数组为基准，对其运用reduce方法去遍历数组，初始值obj是一个空对象{}，遍历过程以props数组的值prop为键，props数组当前索引index为索引去取values数组的项为值组装成对象并返回。

由于对象的键不能为undefined，因此，如果数组props的长度比数组values小，那么values多出来的那些项就不管了。如果相反，那么该对象相应键的值为undefined。

zipWith

Creates an array of elements, grouped based on the position in the original arrays and using function as the last value to specify how grouped values should be combined.

Check if the last argument provided in a function. Use Math.max() to get the longest array in the arguments. Creates an array with that length as return value and use Array.from() with a map-function to create an array of grouped elements. If lengths of the argument-arrays vary, undefined is used where no value could be found. The function is invoked with the elements of each group (...group).

const zipWith = (...arrays) => {
 const length = arrays.length;
 let fn = length > 1 ? arrays[length - 1] : undefined;
 fn = typeof fn == 'function' ? (arrays.pop(), fn) : undefined;
 const maxLength = Math.max(...arrays.map(x => x.length));
 const result = Array.from({ length: maxLength }).map((_, i) => {
   return Array.from({ length: arrays.length }, (_, k) => arrays[k][i]);
 });
 return fn ? result.map(arr => fn(...arr)) : result;
};

创建一个数组，数组元素由指定的多个数组根据位置对应分组而成的数组构成，然后分组后的数组元素应用指定方法进行结合。

➜  code cat zipWith.js
const zipWith = (...arrays) => {
  const length = arrays.length;
  let fn = length > 1 ? arrays[length - 1] : undefined;
  fn = typeof fn === 'function' ? (arrays.pop(), fn) : undefined;
  const maxLength = Math.max(...arrays.map(x => x.length));
  const result = Array.from({length: maxLength}).map((_, i) => {return Array.from({length: arrays.length}, (_, k) => arrays[k][i]);});
  return fn ? result.map(arr => fn(...arr)) : result;
};

console.log(zipWith([1, 2], [10, 20], [100, 200], (a, b, c) => a + b + c));
console.log(zipWith(
  [1, 2, 3],
  [10, 20],
  [100, 200],
  (a, b, c) => (a != null ? a : 'a') + (b != null ? b : 'b') + (c != null ? c : 'c')
));

➜  code node zipWith.js
[ 111, 222 ]
[ 111, 222, '3bc' ]

const length = arrays.length;
let fn = length > 1 ? arrays[length - 1] : undefined;
fn = typeof fn === 'function' ? (arrays.pop(), fn) : undefined;

首先这里把参数长度arrays.length存到length里，然后根据参数长度length判断参数里是否指定了某个方法。如果length小于等于1，则没有传入指定方法，因而fn = undefined；否则，认为参数的最后一个arrays[length - 1]传入了方法。

接下来还得判断fn是不是一个function，如果是，arrays.pop()把方法剔除，只留数组，然后返回fn赋值给fn；否则把undefined赋值给fn。

其实我觉得这里和前面的写重复了，我觉得fn = typeof fn === 'function' ? (arrays.pop(), fn) : undefined改成下面更好：

if (typeof fn === 'function') {
  arrays.pop();
}

这样就避免了fn的重复赋值了。因为fn = typeof fn === 'function' ? (arrays.pop(), fn) : undefined这一行的作用就是为了把方法pop出去而已，没必要再重新赋值。

const maxLength = Math.max(...arrays.map(x => x.length));

这一行计算出最终返回数组的长度，这点易证，不展开。

const result = Array.from({ length: maxLength }).map((_, i) => {
  return Array.from({ length: arrays.length }, (_, k) => arrays[k][i]);
});

这里其实和前面的zip方法是一样的，到现在为止返回的result是和zip的结果是一样的。

return fn ? result.map(arr => fn(...arr)) : result;

然后判断fn是不是非undefined，如果是不用处理直接返回result，否则对result数组所有元素调用fn方法并返回结果。需要注意的是参数…arr是需要展开的，参数不是单个的数组元素，而是数组的所有元素。

到目前为止，我已经把数组的都过了一遍了，不过因为这个 30 seconds of code一直在开发当中，所以在我翻译过程中，数组的项又增加了很多个，下面部分为新增的项。

all

Returns true if all elements in a collection are truthy, false otherwise.

Use Array.every(Boolean) to test if all elements in the collection are truthy.

const all = arr => arr.every(Boolean);

如果数组所有元素为真，返回true，否则返回false。

使用 Array.every(Boolean) 来检测数组所有元素是否都为真。

➜  code cat all.js
const all = arr => arr.every(Boolean);

console.log(all([1, 2, 3]));

➜  code node all.js
true

这其实就是Array.every()函数能做的事情。参数为Boolean就是判断是不是数组所有元素布尔为都为真。

allBy

Returns true if the provided predicate function returns true for all elements in a collection, false otherwise.

Use Array.every() to test if all elements in the collection return true based on fn.

const allBy = (arr, fn) => arr.every(fn);

如果数组所有元素应用了指定的断言方法都为真，那么返回true，否则返回false。

使用Array.every()结合fn来检测数组所有元素调用fn后布尔值是否都为真。

➜  code cat allBy.js
const allBy = (arr, fn) => arr.every(fn);

console.log(allBy([4, 2, 3], x => x > 1));

➜  code node allBy.js
true

比all多了一个fn方法而已，只需要把every的参数换成fn就行，这没啥可说的。

any

Returns true if at least one element in a collection is truthy, false otherwise.

Use Array.some(Boolean) to test if any elements in the collection are truthy.

const any = arr => arr.some(Boolean);

如果一个数组中至少有一个元素布尔值为真，返回true，否则返回false。

使用Array.some(Boolean)来检测数组中是否有一个元素布尔值为真。

➜  code cat any.js
const any = arr => arr.some(Boolean);

console.log(any([0, 0, 1, 0]));

➜  code node any.js
true

这就是Array.some()可以做的事情，没啥可说。

anyBy

Returns true if the provided predicate function returns true for at least one element in a collection, false otherwise.

Use Array.some() to test if any elements in the collection return true based on fn.

const anyBy = (arr, fn) => arr.some(fn);

如果对一个数组的元素运用指定的断言方法后至少有一个结果布尔值为真，返回true，否则返回false。

使用Array.some()结合fn检测一个数组中调用指定断言方法后至少有一个结果布尔值为真。

➜  code cat anyBy.js
const anyBy = (arr, fn) => arr.some(fn);

console.log(anyBy([0, 1, 2, 0], x => x >= 2));

➜  code node anyBy.js
true

比any多了一个fn方法而已，只需要把some的参数换成fn就行，这没啥可说的。

bifurcate

Splits values into two groups. If an element in filter is truthy, the corresponding element in the collection belongs to the first group; otherwise, it belongs to the second group.

Use Array.reduce() and Array.push() to add elements to groups, based on filter.

const bifurcate = (arr, filter) =>
  arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);

把一个数组分裂成两组。如果一个元素在filter中对应值是truthy，那么相应位置的被分裂元素归属于第一个组，否则归属于第二个组。

使用Array.reduce()和Array.push()在filter的基础上把待分裂的元素添加到相应的组中。

➜  code cat bifurcate.js
const bifurcate = (arr, filter) => arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);

console.log(bifurcate(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]));

➜  code node bifurcate.js
[ [ 'beep', 'boop', 'bar' ], [ 'foo' ] ]

reduce初始值acc是一个含有两个空数组的二维数组[[], []]，遍历过程中去判断对应索引filter的值filter[i] 是否为truthy，若真，则把当前索引对应元素val加到acc[0]中；否则加到acc[1]中。遍历结束，分组完成。

bifurcateBy

Splits values into two groups according to a predicate function, which specifies which group an element in the input collection belongs to. If the predicate function returns a truthy value, the collection element belongs to the first group; otherwise, it belongs to the second group.

Use Array.reduce() and Array.push() to add elements to groups, based on the value returned by fn for each element.

const bifurcateBy = (arr, fn) =>
  arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);

根据提供的断言方法将一个数组分裂成两组。如果断言结果为truthy，该元素将被分配到第一组，否则分配在第二组。

使用Array.reduce()和Array.push()在断言方法fn的基础上将待分裂的元素添加到相应的组中。

➜  code cat bifurcateBy.js
const bifurcateBy = (arr, fn) => arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);

console.log(bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b'));
➜  code node bifurcateBy.js
[ [ 'beep', 'boop', 'bar' ], [ 'foo' ] ]

跟bifurcate相比不同的地方是：

(acc[fn(val, i) ? 0 : 1].push(val), acc)

这里是对数组的元素val调用指定方法，而bifurcate是对应位置filter[i]的直接结果。其余都是一样的。这也很好理解了。